<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <link rel="stylesheet" href="css/fonts/font-awesome.min.css">
        <!-- <link rel="stylesheet" href="at.alicdn.com/t/font_1462202196_1040895.css"> -->
        <link rel="stylesheet" href="css/ui-box.css">
        <link rel="stylesheet" href="css/ui-base.css">
        <link rel="stylesheet" href="css/ui-color.css">
        <link rel="stylesheet" href="css/appcan.icon.css">
        <link rel="stylesheet" href="css/appcan.control.css">
        <link rel="stylesheet" href="css/fonts/iconfont.css">
        <style type="text/css">
        
            .focus {

            }
            .sc-text-active {
                /*color: #ff00ff;*/
               color: #00b7fa !important;
                border-bottom: none;
            }

            .ulev {
                padding-top: .2em;
            }
            /*.sc-text-active {*/
                /*font-size: 1.2em;*/
                /*color: #00b7fa !important;*/
                /*border-bottom: none;*/
                /*background-color: #eeeeee;*/
            /*}*/
            .tab_m {/*导航条box*/
                border-top: 1px solid #bababa;
                height: 3.2em;
            }
            .sc-text-tab {/*默认图标文字颜色*/
                color: #c3c3c3;
            }
        </style>
    </head>
    <body class="um-vp" ontouchstart>
        <div id="page_0" class="up ub ub-ver bc-bg" tabindex="0">
            <!--header开始-->
            <div id="header" class="uh bc-text-head ub bc-head">
                <div class="nav-btn" id="nav-left"></div>
                <h1 class="ut ub-f1 ulev-3 ut-s tx-c" tabindex="0">健康资讯</h1>
                <div class="nav-btn" id="nav-right">
                    <!--按钮开始-->

                    <!--按钮结束-->
                </div>
            </div>
            <!--header结束--><!--content开始-->
            <div id="content" class="ub-f1 tx-l ">

            </div>
            <!--content结束-->
            <div id="tabview" class="uf sc-bg ubt sc-border-tab"></div>

        </div>
        <script src="js/appcan.js"></script>
        <script src="js/appcan.control.js"></script>
        <script src="js/appcan.tab.js"></script>
    </body>
    <script>
        appcan.ready(function() {
            var top = $('#header').offset().height;
            //alert(top)
            appcan.frame.open({
                id : "content",
                url : [{
                    "inPageName" : "A",
                    "inUrl" : "frameA_content.html",
                }, {
                    "inPageName" : "B",
                    "inUrl" : "frameB_content.html",
                }, {
                    "inPageName" : "C",
                    "inUrl" : "frameC_content.html",
                }],
                top : top,
                left : 0,
                index : 0,
                change : function(err, res) {
                    tabview.moveTo(res.multiPopSelectedIndex);
                    //alert(res.multiPopSelectedIndex)
                }
            });
            window.onorientationchange = window.onresize = function() {
                appcan.frame.resize("content", 0, top);
            }
        });
        var tabview = appcan.tab({
            selector : "#tabview",
            hasIcon : true,
            hasAnim : false,
            hasLabel : true,
            hasBadge : false,
            data : [{
                label : "社会热点",
                "icon" : "icon-socialcontant-alt iconfont"
            }, {
                label : "生活贴士",
                "icon" : "icon-shenghuo iconfont"
            }, {
                label : "食品新闻",
                "icon" : "icon-naiping iconfont"
            }]
        });
        tabview.on("click", function(obj, index) {
            appcan.window.selectMultiPopover("content", index);
        })
    </script>
</html>